<template>
  <div id="homeIndex">
    <!-- 顶部数据展示 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card" style="height: 140px;">
          <div class="homeIndex_dataBox">
            <div class="homeIndex_dataImg">
              <i class="icon_admin el-icon-user"></i>
            </div>
            <div class="homeIndex_data">
              <div style="font-size: 14px; color: #999">训练人数</div>
              <div class="homeIndex_data_num" v-if="!isLoading">
                <avue-count-up :end="4"></avue-count-up>
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 10px">今日训练 34 人</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="height: 140px;">
          <div class="homeIndex_dataBox">
            <div class="homeIndex_dataImg">
              <i class="icon_admin el-icon-user"></i>
            </div>
            <div class="homeIndex_data">
              <div style="font-size: 14px; color: #999">伤病记录</div>
              <div class="homeIndex_data_num" v-if="!isLoading">
                <avue-count-up :end="salesDataList.totalNumber" :decimals="2"></avue-count-up>
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 10px">今日训练 34 人</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="height: 140px;">
          <div class="homeIndex_dataBox">
            <div class="homeIndex_dataImg">
              <i class="icon_admin el-icon-user"></i>
            </div>
            <div class="homeIndex_data">
              <div style="font-size: 14px; color: #999">请假情况</div>
              <div class="homeIndex_data_num" v-if="!isLoading">
                <avue-count-up :end="pictureDataList.totalNumber"></avue-count-up>
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 10px">今日训练 34 人</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="height: 140px;">
          <div class="homeIndex_dataBox">
            <div class="homeIndex_dataImg">
              <i class="icon_admin el-icon-user"></i>
            </div>
            <div class="homeIndex_data">
              <div style="font-size: 14px; color: #999">教练人数</div>
              <div class="homeIndex_data_num" v-if="!isLoading">
                <avue-count-up :end="protectDataList.totalNumber | formatnumber"></avue-count-up>
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 10px">今日新增 45张</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 用户统计图表 -->
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="color: #3e3e3e; font-size: 14px; font-weight: 400">用户统计</span>
          </div>
          <div>
            <div class="usetChart_btn">
              <el-button size="mini" round @click="setChart(0)" :class="{ active_btn: timeIndex == 0 }">按日</el-button>
              <el-button size="mini" :disabled="days < 7" round @click="setChart(1)"
                :class="{ active_btn: timeIndex == 1 }">按周</el-button>
              <el-button size="mini" :disabled="days < 30" round @click="setChart(2)"
                :class="{ active_btn: timeIndex == 2 }">按月</el-button>
              <el-date-picker v-model="userTime" type="datetimerange" range-separator="~" start-placeholder="开始日期"
                end-placeholder="结束日期" size="mini" style="margin-left: 10px" value-format="yyyy-MM-dd HH:mm:ss"
                prefix-icon="icon_admin icon-gonggongtubiao_riqi" class="admin_datetimerange"></el-date-picker>
            </div>
            <div ref="pieDom" id="pieChart" class="chart-box"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="color: #3e3e3e; font-size: 14px; font-weight: 400">待办事项</span>
          </div>
          <div style="height: 424px">
            <div style="max-height: 360px; overflow: auto" v-infinite-scroll="loadBackLogData">
              <div v-for="(item, index) in backLogData" :key="index">
                <div class="user_date">{{ item.date }}</div>
                <el-timeline class="user_date_info">
                  <el-timeline-item color="#3C69CA" v-for="(list, index) in item.data" :key="index">
                    <span v-html="list.message" @click="getList(list)"></span>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 订单量统计 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="color: #3e3e3e; font-size: 14px; font-weight: 400">订单量统计</span>
          </div>
          <div>
            <div class="usetChart_btn">
              <el-button size="mini" round @click="order(0)" :class="{ active_btn: timeIndex1 == 0 }">按日</el-button>
              <el-button size="mini" :disabled="days1 < 7" round @click="order(1)"
                :class="{ active_btn: timeIndex1 == 1 }">按周</el-button>
              <el-button size="mini" :disabled="days1 < 30" round @click="order(2)"
                :class="{ active_btn: timeIndex1 == 2 }">按月</el-button>
              <el-date-picker v-model="orderTime" type="datetimerange" range-separator="~" start-placeholder="开始时间"
                end-placeholder="结束时间" size="mini" style="margin-left: 10px" value-format="yyyy-MM-dd HH:mm:ss"
                prefix-icon="icon_admin icon-gonggongtubiao_riqi" class="admin_datetimerange"></el-date-picker>
            </div>
            <div ref="pieDom1" id="pieChart1" class="chart-box"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="color: #3e3e3e; font-size: 14px; font-weight: 400">伤病统计</span>
          </div>
          <div style="height: 365px">
            <div style="text-align: center; margin-top: 60px">
              <el-progress type="dashboard" :percentage="protectRightData.proportion" :color="colors" :width="200"
                :stroke-width="10"></el-progress>
              <div style="color: #666666; font-size: 14px; margin-top: -10px">伤病占比</div>
            </div>
            <div class="protect_data">
              <div class="protect_data_num">
                <span>{{ protectRightData.num1 }}</span>
                <div>伤病总数</div>
              </div>
              <div class="protect_data_num protect_data_num1">
                <span>{{ protectRightData.num2 }}</span>
                <div>伤病中</div>
              </div>
              <div class="protect_data_num protect_data_num1">
                <span>{{ protectRightData.num3 }}</span>
                <div>伤病完结</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { dateFormat, DateDiff } from "@/utils/date";

var option = {
  color: ["#3C69CA", "#49C37A", "#FBA73B"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line"
    }
  },
  legend: {
    data: ["登录", "注册", "认证"],
    right: 0,
    top: 0
  },
  xAxis: [
    {
      type: "category",
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: ""
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "人数",
      nameGap: 20,
      axisLabel: {
        formatter: "{value}"
      },
      min: 0,
      // max: 60,
      // interval: 15,
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "登录",
      type: "bar",
      // barWidth: 20,
      barMaxWidth: 20,
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: "注册",
      type: "bar",
      barMaxWidth: 20,
      // barWidth: 20,
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: "认证",
      type: "bar",
      barMaxWidth: 20,
      // barWidth: 20,
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};
var option1 = {
  color: ["#49C37A", "#FBA73B"],
  title: {},
  tooltip: {
    trigger: "axis"
    // axisPointer: {
    //   // type: "cross",
    //   // crossStyle: {
    //   //   color: "#999",
    //   // },
    // },
  },
  legend: {
    data: ["已支付", "待支付"],
    right: 0,
    top: 0
  },
  xAxis: [
    {
      type: "category",
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: "line"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "人数",
      nameGap: 20,
      axisLabel: {
        formatter: "{value}"
      },
      min: 0,
      // max: 60,
      // interval: 15,
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "已支付",
      type: "line",
      symbol: "circle",
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: "待支付",
      type: "line",
      symbol: "circle",
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};
export default {
  data() {
    return {
      userImg: "../../img/home/allUser.png",
      sumImg: "../../img/home/allSum.png",
      protectImg: "../../img/home/allProtect.png",
      articleImg: "../../img/home/allArticle.png",
      userTime: [],
      orderTime: [],
      timeType: "0",
      value2: "",
      pieChart: "",
      pieChart1: "",
      colors: [{ color: "#3c69ca" }],
      memberDataList: {
        totalNumber: "0"
      },
      salesDataList: {
        totalNumber: "0"
      },
      protectDataList: {
        totalNumber: "0"
      },
      pictureDataList: {
        totalNumber: "0"
      },
      backLogData: [{
        date: "2023-3-9",
        data: [{ message: "李春新增一条伤病" },{ message: "陈晨请假待批准" },{ message: "test3" }]
      },{
        date: "2023-3-13",
        data: [{ message: "test" },{ message: "test2" },{ message: "test3" }]
      }],
      backLogDate: "",
      days: 0,
      days1: 0,
      protectRightData: {},
      timeIndex: 0,
      timeIndex1: 0,
      isLoading: true,
      logLock: false
    };
  },
  created() {
    // this.userTime = [
    //   this.moment()
    //     .startOf("month")
    //     .format("YYYY-MM-DD HH:mm:ss"),
    //   this.moment()
    //     .endOf("date")
    //     .format("YYYY-MM-DD HH:mm:ss")
    // ];
    // this.orderTime = [
    //   this.moment()
    //     .startOf("month")
    //     .format("YYYY-MM-DD HH:mm:ss"),
    //   this.moment()
    //     .endOf("date")
    //     .format("YYYY-MM-DD HH:mm:ss")
    // ];
    this.init();
    // this.userStatistics();

  },
  mounted() {this.drawPie(); 
    // this.userStatistics();
  },
  watch: {
    userTime(n) {
      console.log(n);
      this.days = DateDiff(n[0], n[1]);
    },
    orderTime(n) {
      console.log(n);
      this.days1 = DateDiff(n[0], n[1]);
    }
  },
  methods: {
    init() {

      this.isLoading = false;
      
    },


    setChart(data) {
      this.timeType = data;
      this.timeIndex = data;
      this.userStatistics();
    },

    order(data) {
      this.timeType = data;
      this.timeIndex1 = data;
      this.orderStatistics();
    },
    //柱状图
    userStatistics() {
      let params = {
        sourceType: 0,
        type: this.timeType,
        startTime: this.userTime[0],
        endTIme: this.userTime[1]
      };

      option.series[0].data = { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' };
      option.series[1].data = { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' };
      option.series[2].data ={ value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' };

      option.xAxis[0].data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
      this.drawPie();

    },
    //订单量
    orderStatistics() {
    
     
        let data = res.data.data;
        let arr = [];
        data.map(el => {
          arr.push(el.name);
        });
        option1.series[0].data = [];
        option1.series[1].data = [];
        data.forEach(item => {
          option1.series[0].data.push(item.data.pay);
          option1.series[1].data.push(item.data.nopay);
        });
        option1.xAxis[0].data = arr;
        this.drawPie();
     
    },

 
    drawPie() {
      // 初始化echarts实例
      this.pieChart = this.$echarts.init(this.$refs.pieDom);
      this.pieChart1 = this.$echarts.init(this.$refs.pieDom1);
      this.pieChart.resize();
      this.pieChart1.resize();
      // 绘制图表
      this.pieChart.setOption(option, true);
      this.pieChart1.setOption(option1, true);
      // 图表自适应
      let that = this;
      window.addEventListener("resize", function () {
        that.pieChart.resize();
        that.pieChart1.resize();
      });
    },

    //页面跳转
    getList(list) {
      console.log(list);
      let url = "";
      switch (list.type) {
        case 0:
          url = "/userManagement/index";
          break;
        case 1:
          url = `/operation/audit/index?activeName=userAudit`;
          break;
        case 2:
          url = `/operation/audit/index?activeName=picAudit`;
          break;
        case 3:
          url = "/operation/picture/index";
          break;
        case 4:
          url = "/operation/portrait/add";
          break;
        case 5:
          url = "/operation/portrait/index";
          break;
        case 6:
          url = "/userManagement/index";
          break;
        case 7:
          url = "/operation/infringement/index?activeName=feedsPic";
          break;
        case 8:
          url = "/operation/infringement/index?activeName=protecPic";
          break;
        case 9:
          url = "/operation/infringement/index?activeName=portraitPic";
          break;
        case 10:
          url = "/operation/order/index";
          break;
        case 11:
          url = "/finance/settlement/index";
          break;
        case 12:
          url = "/finance/withdrawDeposit/index";
          break;
        case 13:
          url = "/finance/bill/index";
          break;
      }
      this.$router.push({
        path: url,
        query: {}
      });
    },
    loadBackLogData() {
      if (this.backLogData) {
        if (!this.logLock) {
          let date =
            this.backLogData[this.backLogData.length - 1].date + " 00:00:00";
          getBackLogData(date)
            .then(res => {
              this.logLock = false;
              if (
                res.data.data[res.data.data.length - 1].date !==
                this.backLogData[this.backLogData.length - 1].date
              )
                this.backLogData = this.backLogData.concat(res.data.data);
            })
            .catch(error => {
              console.log(error);
            })
            .finally(() => { });
        } else return;
      } else return;
    }
  }
};
</script>

<style lang="scss">
#homeIndex {
  .el-row {
    margin-top: 15px;
  }

  .homeIndex_dataBox {
    display: flex;
    padding: 10px 0;

    .homeIndex_dataImg {
      position: relative;
      width: 100px;
      height: 100px;
      left: 10px;

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 40px;
        color: #3c69ca;
        margin-top: -20px;
        margin-left: -20px;
      }
    }

    .homeIndex_data {
      flex: 1;
      margin-left: 30px;

      .homeIndex_data_num {
        border-bottom: 1px #e3e3e3 solid;
        padding-bottom: 5px;
        font-size: 28px;
        color: #3e3e3e;
        font-weight: 400;
      }
    }
  }

  .usetChart_btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chart-box {
    box-sizing: border-box;
    width: 100%;
    height: 400px;
    padding: 10px;
  }

  .el-button {
    background-color: #f5f5f5;
    color: #666;
    border: none;

    &:focus {
      color: #fff;
      border-color: #3c69ca;
      background-color: #3c69ca;
    }
  }

  .active_btn {
    color: #fff;
    border-color: #3c69ca;
    background-color: #3c69ca;
  }

  .el-card__header {
    padding: 18px 20px !important;
  }

  .user_date {
    color: #999;
    font-size: 12px;
    width: 81px;
    height: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    background-color: #f5f5f5;
    margin-left: 10px;
  }

  .user_date_info {
    color: #666666;
    font-size: 14px;
    margin-left: -15px !important;
    margin-top: 20px;

    .el-timeline-item__content {
      cursor: pointer;
    }
  }

  .protect_data {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 80px;

    .protect_data_num {
      flex: 1;
      line-height: 24px;

      span {
        color: #3e3e3e;
        font-size: 16px;
        font-weight: 400;
      }

      div {
        clear: #999999;
        font-size: 12px;
        font-weight: 400;
      }
    }

    .protect_data_num1 {
      border-left: 1px #e3e3e3 solid;
    }
  }
}
</style>
